<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS柱状图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body {padding:0;margin:80px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
        h3 {font-weight:normal;display:block;width:600px;text-align:center;}
        ul#q-graph {
            border:2px solid #0063be;
            background:#adfe12;
            background:#adfe12 repeat-x scroll 0 0;
            height:300px !important;
            height:304px;
            width:600px;
            position:relative;
            list-style:none;
            margin:1.1em 1em 3.5em;
            padding:0;
        }
        #q-graph li {
            position:absolute;
            text-align:center;
            bottom:0;
            padding:0;
            margin:0;
        }
        li.qtr {
               width:150px;
               height:300px;
               border-right:1px dotted #41a3e2;
               z-index:2;
           }
        li#q1 {left:0;}
        li#q2 {left:150px;}
        li#q3 {left:300px;}
        li#q4 {left:450px;border-right:none;}
        #q-graph ul {list-style:none;}
        li.bar {
             width:34px;
            color:#fff;
        }
        li.north {
            left:36px;
            background:#ddd;
        }
        li.south {
            left:80px;
            background:#ddd;
        }
        li#ticks {
               left:0;
               height:300px;
               width:100%;
               z-index:1;
           }
        div.ticks {
            position:relative;
            height:60px;
            border-top:1px dotted #41a3e2;
        }
        div.ticks:first-child {border-top:none;}
        div.ticks p {
            position:absolute;
            left:103%;
            top:-11pt;
        }
    </style>
</head>
<body>
<ul id="q-graph">

    <li id="q1" class="qtr">Q1
        <ul>
            <li class="north bar" id="one" style="height:0px;">女</li>
            <li class="south bar" style="height:240px;">男</li>
        </ul>
    </li>

    <li id="q2" class="qtr">Q2
        <ul>
            <li class="north bar" style="height:180px;">女</li>
            <li class="south bar" style="height:120px;">男</li>
        </ul>
    </li>

    <li id="q3" class="qtr">Q3
        <ul>
            <li class="north bar" style="height:60px;">女</li>
            <li class="south bar" style="height:120px;">男</li>
        </ul>
    </li>

    <li id="q4" class="qtr">Q4
        <ul>
            <li class="north bar" style="height:180px;">女</li>
            <li class="south bar" style="height:240px;">男</li>
        </ul>
    </li>

    <li id="ticks">
        <div class="ticks"><p>100%</p></div>
        <div class="ticks"><p>80%</p></div>
        <div class="ticks"><p>60%</p></div>
        <div class="ticks"><p>40%</p></div>
        <div class="ticks"><p>20%</p></div>
    </li>

</ul>
</body>
<script>
    var one = document.getElementById('one');
    setInterval(function () {
        //步骤一:创建异步对象
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
        ajax.open('get','/index/front/getKline');
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState===4 && ajax.status===200) {
                // console.log(ajax.responseText);
                var obj = new Function("return" + ajax.responseText)();//转换后的JSON对象
                if(obj.code !== 0){
                    console.log(obj.number);
                    one.style.height=obj.number+'px';
                }
            }
        }
    },5000);
</script>
</html>